<template>
  <div class="banner" style="position: relative;z-index: 9">
    <!-- 搜索框 -->
    <div class="search_box">
      <p>一站式代码设计素材平台</p>
      <div class="input_div">
        <input v-model="SearchText" placeholder="请输入内容搜索" type="text" @blur="input_Bure()" @focus="input_Focus()">
        <div class="btn_s" @click="searchNow()">
          <img src="../assets/header/fdj.png">
          搜索
        </div>
        <!-- 隐藏的搜索下拉 -->
        <!--  :class="{'addclass':search_show}" -->
        <div :class="{'addclass':search_show}" class="search_hot">
          <!-- 最近搜索 -->
          <div class="lately">
            <span>最近搜索:</span>
            <ul>
              <li>电商banner</li>
              <li>春天插画</li>
              <li>前端niubi</li>
            </ul>
          </div>
          <!-- 热搜榜 -->
          <ul class="Hot_search">
            <li v-for="(item,index) in Hot_list" :key="index">
              <div class="ranking" @click="Option_Change(index)">
                <span :class="{'ranking_class':index<=2}">{{ index + 1 }}</span>
                <span>{{ item.text }}</span>
              </div>
              <div class="result">
                约{{ item.num }}结果
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 热搜词 -->
      <div class="Hot_wrods">
        <span>热搜词: </span>
        <ul>
          <li v-for="(item,index) in Hot_wrods" :key="index">
            {{ item.title }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { search } from '@/api'

export default {
  data() {
    return {
      // 搜索内容
      SearchText: '',
      // 热搜榜
      Hot_list: [
        { text: 'UI设计素材', num: '8,799' },
        { text: '春天', num: '8,799' },
        { text: '企业宣传', num: '8,799' },
        { text: '中国风背景', num: '8,799' },
        { text: '前端VUE', num: '8,799' },
        {
          text:
              '浏览器怪异模式和标准模式的区别在哪里，都来看看吧123456',
          num: '8,799'
        }
      ],
      // 热搜词
      Hot_wrods: [
        { title: '片头' },
        { title: '中国风' },
        { title: '企业宣传' },
        { title: '字幕' },
        { title: '抖音' },
        { title: '快闪' },
        { title: '科技' },
        { title: '风景' }
      ],
      search_show: false
    }
  },
  methods: {
    input_Focus() {
      this.search_show = true
    },
    input_Bure() {
      this.search_show = false
    },
    // 热门搜索
    Option_Change(index) {
      this.SearchText = this.Hot_list[index].text
      this.search_show = false
    },
    // 数据请求
    async searchNow() {
      await search(this.SearchText).then((response) => {
        if (response.code == 200) {
          alert(response.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  position: relative;
  background: url("../assets/header/banner.png") no-repeat;
  height: 443px;
  // 搜索框
  .search_box {
    width: 690px;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%);
    // border:1px white solid;
    p {
      text-align: center;
    }

    p:first-child {
      font-size: 30px;
      color: #ffffff;
      line-height: 48px;
    }

    .input_div {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin: 41px auto 0;
      position: relative;
      height: 60px;
      background: #ffffff;
      border-radius: 30px;

      input {
        font-size: 22px;
        width: 520px;
        border: none;
        outline: none;
      }

      .btn_s {
        width: 130px;
        background: #0bbed4;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        font-size: 21px;
        cursor: pointer;
        padding: 1px 0;

        img {
          width: 23px;
          height: 23px;
          margin-right: 9px;
        }
      }

      // 隐藏的搜索下拉
      .search_hot {
        border: 1px solid #33cfff;
        transition: all 0.5s ease-in;
        overflow: hidden;
        width: 556px;
        height: 0px;
        background: white;
        position: absolute;
        top: 70px;
        left: 10px;
        border-radius: 5px;
        outline: none;
        opacity: 0;
        .lately {
          line-height: 34px;
          background: #f1f1f1;
          font-size: 14px;
          padding: 0 10px;
          color: #333333;
          display: flex;

          ul {
            display: flex;

            li {
              margin-left: 35px;
              cursor: pointer;
            }
          }
        }

        .Hot_search {
          padding: 10px 10px;

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            cursor: pointer;

            .ranking {
              display: flex;

              span:first-child {
                width: 22px;
                line-height: 22px;
                display: block;
                text-align: center;
                font-size: 11px;
                border-radius: 3px;
                background: #e6e6e6;
                border-radius: 3px;
                color: #33cfff;
              }

              span:last-child {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 250px;
                margin-left: 18px;
                font-size: 14px;
                color: #333333;
              }
            }

            // 前三名添加样式
            .ranking_class {
              background: #33cfff !important;
              color: #fff !important;
            }

            // 结果
            .result {
              color: #666666;
              font-size: 14px;
            }
          }
        }
      }
      // 显示过渡
      .addclass {
        height: 386px;
        border: 1px solid #33cfff;
        opacity: 1;
      }
    }

    // 热搜词
    .Hot_wrods {
      width: 520px;
      display: flex;
      justify-content: center;
      color: white;
      font-size: 16px;
      text-align: center;
      margin: 30px auto;

      ul {
        display: flex;
        margin-left: 10px;

        li {
          margin-left: 5px;
        }

        li {
          cursor: pointer;
        }

        li:hover {
          color: #F2F2F2;
        }
      }
    }
  }
}
</style>
